<template>
    <div>
        <el-row>
            <el-col :span="12">
                <el-upload class="avatar-uploader" style="display: inline-block" action="" :on-change="handleUpload"
                    :show-file-list="false" :auto-upload="false">
                    <el-button type="primary" icon="el-icon-upload2" round>导入</el-button>
                </el-upload>
            </el-col>
            <el-col :span="12">
                <el-button @click="download">导出</el-button>
            </el-col>
        </el-row>

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="姓名" prop="__EMPTY"></el-table-column>
            <el-table-column label="开始时间" prop="__EMPTY_1"></el-table-column>
            <el-table-column label="结束时间" prop="__EMPTY_2"></el-table-column>
            <el-table-column label="时长" prop="__EMPTY_3"></el-table-column>
            <el-table-column label="附加时长" prop="__EMPTY_4"></el-table-column>
            <el-table-column label="系数" prop="__EMPTY_7"></el-table-column>
            <el-table-column label="总时长" prop="__EMPTY_5"></el-table-column>
            <el-table-column label="备注" prop="__EMPTY_6"></el-table-column>


        </el-table>
        <div>总时长{{ xiaoshi }}</div>
        <el-row>
            <el-col :span="3">
                <el-button @click="tijiao">确定</el-button>
            </el-col>
            <el-col :span="3">
                <el-button @click="close">取消</el-button>
            </el-col>
        </el-row>

    </div>
</template>
<script>
import XLSX from 'xlsx'
import moment from 'moment'
import { shichangluru } from '@/api';
console.log(XLSX, 998);


export default {
    props:['id'],
    data() {
        return {
            tableData: [],

        }
    },
    methods: {

        download() {
            const fileUrl = "template.xlsx"; // 文件的URL地址
            window.open(fileUrl);
        },



        handleUpload(file) {
            console.log(file);
            console.log(1);
            this.duqu(file.raw)


        },

        duqu(rawfile) {
            console.log(rawfile, 888);
            new Promise((resolve, reject) => {
                const duquwan = new FileReader()
                duquwan.onload = e => {
                    const data = e.target.result
                    // 从FileReader实例从获取上传后的属性
                    const workbook = XLSX.read(data, { type: 'array', cellDates: true })
                    // console.log(workbook,4444);
                    // 获取工作表的第0个名字
                    const firstSheetName = workbook.SheetNames[0]
                    // 用名字获取工作表
                    const worksheet = workbook.Sheets[firstSheetName]
                    const results = XLSX.utils.sheet_to_json(worksheet)
                    console.log(results);
                    let records = []
                    results.forEach(item => {
                        if (typeof item.__EMPTY_7 == 'number' && typeof Number(item.__EMPTY_7) == 'number') {
                            records.push(item)
                        }



                    })
                    this.tableData = records;
                    resolve()




                    console.log(this.startTime);

                }
                duquwan.readAsArrayBuffer(rawfile)
            })
        },

        tijiao() {
            console.log(1);

            let durations = this.tableData.map(item => {

                // console.log(moment(item['__EMPTY_1']).format('YYYY-MM-DD HH:mm:ss'), 333344);
                if (moment(item['__EMPTY_1']).format('YYYY-MM-DD HH:mm:ss') == 'Invalid date') {
                    item['startTime'] = moment(item['__EMPTY_1'].replace("年", "-").replace("月", "-").replace("日", " ").replace("：", ":")).format('YYYY-MM-DD HH:mm:ss')
                    item['endTime'] = moment(item['__EMPTY_2'].replace("年", "-").replace("月", "-").replace("日", " ").replace("：", ":")).format('YYYY-MM-DD HH:mm:ss')
                } else {
                    item['startTime'] = moment(item['__EMPTY_1']).format('YYYY-MM-DD HH:mm:ss')
                    item['endTime'] = moment(item['__EMPTY_2']).format('YYYY-MM-DD HH:mm:ss')
                }
                let startTimeStr = item['__EMPTY_1'];
                console.log(item, 3333);


                return {
                    realName: item["__EMPTY"],
                    startTime: item["startTime"],
                    endTime: item["endTime"],
                    taskDuration: item["__EMPTY_3"],
                    extraDuration: item["__EMPTY_4"] ? item["__EMPTY_4"] : 0,
                    finalDuration: item["__EMPTY_5"],
                    remark: item["__EMPTY_6"] ? item["__EMPTY_6"] : "",
                    coefficient: item["__EMPTY_7"],
                }
            })
            let params={
                taskId:this.id,
                durations:durations
            }
            console.log(this.taskId,8888);
            
            shichangluru(params).then(res=>{
                console.log(1);
                
                console.log(res,776699);
                this.$message({
                    type: "warning",
                    message: "录入成功，等待审核"
                })
                this.$emit("done")
                
            })

        },


        close() {
            this.$emit("done")
        }
        // beforeAvatarUpload(file) {
        //         console.log(file.type, 345);

        //         const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        //         const isLt2M = file.size / 1024 / 1024 < 1;
        //         console.log('jinru', 234);

        //         if (!isJPG) {
        //             this.$message.error('上传头像图片只能是 JPG\PNG 格式!');
        //             console.log('格式', 111);

        //         }
        //         if (!isLt2M) {
        //             this.$message.error('上传头像图片大小不能超过 1MB!');
        //             console.log('大小', 222);

        //         }
        //         console.log('外面', 44);

        //         return isJPG && isLt2M;
        //     },
        //     handleCoverChange(file) {
        //         if (this.beforeAvatarUpload(file.raw)) {

        //             const formData = new FormData();
        //             formData.append("img", file.raw);
        //             tupushang(formData).then(res => {
        //                 // console.log(res);
        //                 console.log('gggg', 33);

        //                 this.form.cover = res.data.img
        //             })
        //         }
        //     },
    },
    computed: {
        xiaoshi() {
            return this.tableData.reduce((pre, next) => pre + next.__EMPTY_5, 0)
        }
    }

}
</script>